import React from "react";
import styles from './index.module.scss';
import BasicConfigBox from './BasicConfigBox';
import CodeEditorBox from './CodeEditorBox';
import DataConfigBox from './DataConfigBox';
import AdvanceConfigBox from './AdvanceConfigBox';
import EventsBox from './EventsBox';
import {Tabs} from "@/components/wocloud-antd";
import {EE} from "@/utils";
import EnumOnFire from "@/pages/dv/constants/EnumOnFire";
import dvTool from "@/pages/dv/dvTool";
import {isEmpty, isEqual} from "lodash";
import {hasPanelComponent} from '../charts/chartsMap';

const {TabPane} = Tabs;


interface IProps {
  chartOption?: DV.IChart
}

interface IState {

}

/**
 * 组件仪表盘控制台
 */
export default class Panel_Chart extends React.PureComponent<IProps, IState> {

  public uid: string;
  public type: string;
  public frameType: string;
  public advanceConfig: DV.IAdvanceConfig;
  public baseConfig: IBaseConfig;
  public codeConfig: DV.ICodeConfig;
  public events: DV.IChartEvent;
  public dataConfig: DV.IDataConfig;

  constructor(props: IProps) {
    super(props);
    this.initConfig(props.chartOption);
  }

  initConfig(chartOption: DV.IChart | undefined){
    const splitConfig = dvTool.splitConfig(chartOption);
    this.advanceConfig = splitConfig.advanceConfig;
    this.baseConfig = splitConfig.baseConfig;
    this.codeConfig = splitConfig.codeConfig;
    this.events = splitConfig.events;
    this.dataConfig = splitConfig.dataConfig;
    this.uid = this.baseConfig.uid || '';
    this.type = this.baseConfig.type || '';
    this.frameType = this.baseConfig.frameType || '';
  }

  componentDidMount(): void {
    // 分发更新数据
    EE.on(EnumOnFire.updateChart, (chart: any) => {
      if (chart[this.uid] && dvTool.selectedChartKey === this.uid) {
        const {baseConfig, advanceConfig, dataConfig, codeConfig, events} = dvTool.splitConfig(chart[this.uid]);
        if (!isEqual(baseConfig, this.baseConfig)) {
          EE.fire(dvTool.EnumChartFire.update_baseConfig, baseConfig);
        }
        if (!isEqual(advanceConfig, this.advanceConfig)) {
          EE.fire(dvTool.EnumChartFire.update_advanceConfig, advanceConfig);
        }
        if (!isEqual(dataConfig, this.dataConfig)) {
          EE.fire(dvTool.EnumChartFire.update_dataConfig, dataConfig);
        }
        if (!isEqual(codeConfig, this.codeConfig)) {
          EE.fire(dvTool.EnumChartFire.update_codeConfig, codeConfig);
        }
        if (!isEqual(events, this.events)) {
          EE.fire(dvTool.EnumChartFire.update_functions, events);
        }
      }
    });
  }

  componentWillUnmount(): void {
    // 取消订阅
    dvTool.offChartFireKey();
  }

  render(): React.ReactNode {
    return <div className={styles.chartPanelCommon}>
      <Tabs
        type="card"
        size={'small'}
        defaultActiveKey={'advanceConfig'}
      >
        <TabPane tab="配置" key="baseConfig">
          <BasicConfigBox
            uid={this.uid}
            baseConfig={this.baseConfig}
          />
        </TabPane>
        {
          hasPanelComponent(this.type) && <TabPane tab="高级" key="advanceConfig">
            <AdvanceConfigBox
              uid={this.uid}
              type={this.type}
              frameType={this.frameType}
              advanceConfig={this.advanceConfig}
            />
          </TabPane>
        }


        <TabPane tab="数据" key="dataConfig">
          <DataConfigBox
            uid={this.uid}
            dataConfig={this.dataConfig}
          />
        </TabPane>
        {
          !this.codeConfig.hidden && <TabPane tab="编程" key="codeConfig">
            <CodeEditorBox
              uid={this.uid}
              frameType={this.baseConfig.frameType}
              codeConfig={this.codeConfig}
            />
          </TabPane>
        }
        <TabPane tab="事件" key="functions">
          <EventsBox
            uid={this.uid}
            events={this.events}
          />
        </TabPane>
      </Tabs>

    </div>;
  }
}
